<!DOCTYPE html>
<html lang="zh-cn" class="h-100">
    <head>
        <title>迷你播放器</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="css/bootstrap-5.1.3.min.css" rel="stylesheet">
        <style>
            .image-rect { width: 234px; height: 277px; }
            .image-pointer { cursor: pointer; }
            .myfile {
                cursor: pointer;
                color: #FAFAFA;
                background-image: linear-gradient(#3949AB, #5C6BC0, #3949AB);
            }
        </style>
    </head>
    <body class="d-flex h-100 text-center" style="background-image: linear-gradient(#388E3C, #A5D6A7, #388E3C);">
        <div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
            <header class="mb-auto"><h3 class="text-white">8K超清播放器</h3></header>

            <main id="app" class="p-3">
                <div v-if="router == 'index'" class="container">
                    <div class="row">
                        <div class="col">
                            <button class="btn image-rect" style="background-image: url(image/local.png);" @click="switchPage('list')"></button>
                        </div>
                        <div class="col">
                            <button class="btn image-rect" style="background-image: url(image/aqy.png);" @click="goUrl('https://www.iqiyi.com/')"></button>
                        </div>
                        <div class="col">
                            <button class="btn image-rect" style="background-image: url(image/tx.png);" @click="goUrl('https://v.qq.com/')"></button>
                        </div>
                        <div class="col">
                            <button class="btn image-rect" style="background-image: url(image/tx.png);" @click="goUrl('https://www.youku.com/')"></button>
                        </div>
                    </div>
                    <div class="row p-5 justify-content-end">
                        <div class="col-1">
                            <button class="btn btn-success" @click="quitApp">退出</button>
                        </div>
                    </div>
                </div>

                <div v-if="router == 'list'" class="container-fluid">
                    <div class="row" v-for="(rec, idx) in records" key="idx">
                        <div class="col myfile m-3 p-3" v-for="(rec2, idx2) in rec" key="rec2.id">
                            <button class="btn" v-if="rec2.id" @click="onPlay(rec2.id)">
                                <p>{{rec2.name}}</p>
                                <p>影片大小：{{rec2.size}}</p>
                            </button>
                        </div>
                    </div>
                    <div class="row justify-content-end">
                        <div class="col-1">
                            <button class="btn btn-success" @click="switchPage('index')">返回</button>
                        </div>
                    </div>
                </div>
            </main>

            <footer class="mt-auto">
                <div>
                    <a href="http://www.fidosmart.cn" class="text-white">深圳市前海多晟科技股份有限公司</a>
                    <span class="text-white"><small>版权所有： 2019-2021</small></span>
                </div>
            </footer>
        </div>

        <script src="js/bootstrap.bundle-5.1.3.min.js"></script>
        <script src="js/vue-2.6.14.min.js"></script>

        <script type="text/javascript">
            const MOVIES_DIR = "movies";
            const KB = 1024, MB = KB * 1024, GB = MB * 1024

            function fmtSize(size) {
                let d, s
                if (size >= GB) d = GB, s = "GB"
                else if (size >= MB) d = MB, s = "MB"
                else if (size >= KB) d = KB, s = "KB"
                else d = 1, s = ""
                return (size / d).toFixed(2) + s
            }

            new Vue({
                el: '#app',

                data() {
                    return {
                        router: "index",
                        records: undefined,
                        files: undefined,
                        url: undefined
                    }
                },

                create() {
                },

                methods: {
                    initRecords() {
                        // listFiles为自定义扩展函数，列出指定目录下的文件
                        /* 返回值类型
                        {
                            code: number, // 0: 成功，1：失败
                            message: string, // 失败时返回错误信息
                            data: [
                                {
                                    name: string, // 文件名
                                    size: number, // 文件大小
                                    isDir: boolean // 是否是目录
                                },
                                ...
                            ]
                        }
                        */
                        const ar = window.listFiles(MOVIES_DIR + "\\*.*")
                        if (ar.code) return window.alert(ar.message)
                        const fs = ar.data
                        let arr0 = [], arr1 = []
                        for (const i in fs) {
                            if (!fs[i].isDir) {
                                if (arr1.length == 4) {
                                    arr0.push(arr1)
                                    arr1 = []
                                }
                                arr1.push({
                                    id: i,
                                    name: fs[i].name,
                                    size: fmtSize(fs[i].size)
                                })
                            }
                        }
                        if (arr1.length) {
                            while (arr1.length < 4) arr1.push({id: null})
                            arr0.push(arr1)
                        }
                        this.records = arr0
                        this.files = fs
                    },

                    switchPage(id) {
                        if (!this.records && id === 'list') this.initRecords()
                        this.router = id
                    },

                    onPlay(id) {
                        // vlcPlay为自定义扩展函数，调用播放器播放指定路径的视频文件
                        window.vlcPlay(MOVIES_DIR + "\\" + this.files[id].name)
                    },

                    goUrl(url) {
                        window.location = url
                    },
                    quitApp() {
                        window.quitApp()
                    }
                }
            })
        </script>
    </body>
</html>